<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			img{
				width: 200px;
				height: 200px;
				margin-bottom: 20px;
				display: block;
			}
			
			.p1:hover{
				box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
			}
			
			.p2{
				width: 50%;
				position: relative;
				font-size: 16px;
				font-weight: 900;
			}
			.p2 img{
				width: 100%;
				height: auto;
				opacity: 0.3;
			}
			.p3{
				position: absolute;
				top: 8px;
				left: 16px;
			}
			.p4{
				position: absolute;
				top: 8px;
				right: 16px;
			}
			.p5{
				width: 100%;
				position: absolute;
				top: 50%;
				text-align: center;
			}
			.p6{
				position: absolute;
				bottom: 8px;
				left: 16px;
			}
			.p7{
				position: absolute;
				bottom: 8px;
				right: 16px;
			}
		</style>
	</head>
	<body>
		<!--圆角图片-->
		<img style="border-radius: 8px;" src="http://www.runoob.com/wp-content/uploads/2016/04/img_fjords.jpg"/>
		<!--圆形图片-->
		<img style="border-radius: 50%;" src="http://www.runoob.com/wp-content/uploads/2016/04/img_fjords.jpg"/>
		<!--缩略图-->
		<img class="p1" style="border: 1px solid #DDD;border-radius: 4px;padding: 5px;transition: 1s;" src="http://www.runoob.com/wp-content/uploads/2016/04/img_fjords.jpg"/>
		<!--响应式图片-->
		<img style="max-width: 100%;height: auto;" src="http://www.runoob.com/wp-content/uploads/2016/04/img_fjords.jpg"/>
		<!--图片文本-->
		<div class="p2">
			<img src="http://www.runoob.com/wp-content/uploads/2016/04/img_fjords.jpg"/>
			<div class="p3">左上角</div>
			<div class="p4">右上角</div>
			<div class="p5">居中</div>
			<div class="p6">左下角</div>
			<div class="p7">右下角</div>
		</div>
	</body>
</html>